/**
 * Created by DuHuiling on 2017/4/25.
 */

var InvestDetail = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:this.props.ProDetail
        }
    },
    render:function(){
        //剩余时间
        var remain = parseInt((new Date(this.state.ProDetail.ProjectDetail.RepayBegin) - new Date()) / 1000 / 60 / 60 / 24);
        return(
            <div className="invest-detail">
                <div className="title-account"><span>融资详情</span>
                    <div className="other">
                        <a href="javascript:void (0)" onclick={this.props.exportPDF.onClick}><i className="iconfont icon-export"></i><p>导出PDF文件</p></a>
                        <a href="javascript:void (0)" onclick={this.props.printBtn.onClick}><i className="iconfont icon-print"></i><p>打印</p></a>
                        <a href="投资记录.html"><i className="iconfont icon-back"></i><p>返回</p></a>
                    </div>
                </div>
                <div>
                    <h1>
                        {this.state.ProDetail.ProjectDetail.ProjectName}
                        {this.state.ProDetail.ProjectDetail.F_StatusName ?
                            <span className={"tag " + this.state.ProDetail.ProjectDetail.F_StatusName.className}>{this.state.ProDetail.ProjectDetail.F_StatusName.status}</span> : ""
                        }
                        <span class="countdown-data"><i class="iconfont icon-clock"></i>距离还款日还有：<b class="fc-main"> {remain}天</b> </span>
                    </h1>
                    <div className="money">
                        <ul class="clearfix">
                            <li class="col-1">
                                <p class="fc-main"><b class="fs42">{this.state.ProDetail.FinancingDetail.TotalRepayment}</b>元</p>
                                <p class="fc-light">到期应还资金总额</p>
                            </li>
                            <li class="col-2">
                                <p>还款日期<b>{this.state.ProDetail.ProjectDetail.RepayBegin}</b></p>
                                <p>借款人<b>{this.state.ProDetail.CallbackAccount.AccountName}</b></p>
                            </li>
                        </ul>
                    </div>
                    <div className="info">
                        <ul className="clearfix">
                            <li><p><b>{this.state.ProDetail.ProjectDetail.IAmount}</b>元</p>
                                <p className="fc-light">融资金额</p></li>
                            <li><p className="fc-main"><b>{this.state.ProDetail.FinancingDetail.FinancingCost}</b>元</p>
                                <p className="fc-light">融资成本</p></li>
                            <li><p className="fc-main"><b>{this.state.ProDetail.ProjectDetail.FinanceRate}</b>%</p>
                                <p className="fc-light">融资利率</p></li>
                        </ul>
                    </div>
                    <div className="pro-data">
                        <ul className="clearfix">
                            <li>融资期限：{this.state.ProDetail.ProjectDetail.Duration+"天"}</li>
                            <li>起息日：{this.state.ProDetail.ProjectDetail.ValueBegin}</li>
                            <li>到期日：{this.state.ProDetail.ProjectDetail.RepayBegin}</li>
                        </ul>
                    </div>
                    <div className="bank-back clearfix">
                        <label className="f-left">回款账户：</label>
                        <div className="input f-left">
                            <span className={"bank-logo "+this.state.ProDetail.CallbackAccount.BankLogo}></span>
                            <span>{this.state.ProDetail.CallbackAccount.AccountNo}</span>
                        </div>
                    </div>
                </div>
                <span className="angle angle-right-bottom"></span>
            </div>
        )
    }
});
module.exports = InvestDetail;